<template>
	<view class="music-head" :style="{ color : props.color }">
		<view v-if="props.icon" class="music-head-icon" :class="{ 'music-head-iconBlack' : props.iconBlack }">
			<text @tap="handleToBack" class="iconfont iconzuojiantou-copy"></text> | <text @tap="handleToHome" class="iconfont iconshouye"></text>
		</view>
		{{props.title}}
	</view>
</template>

<script lang="ts" setup>
	const props=defineProps<{
		title?:String,
		icon?:String,
		color?:String,
		iconBlack?:String
	}>()
	function handleToBack(){
		uni.navigateBack();
	}
	function handleToHome(){
		uni.navigateTo({
			url: '/pages/index/index'
		});
	}
</script>

<style lang="scss" scoped>
@import '../../common/iconfont.css';
.music-head{ height:75px; text-align: center; line-height: 80px; font-size:16px; color:black; overflow: hidden; position: relative;}
.music-head-icon{ width:97px; height:31px; background:rgba(0,0,0,0.4); border-radius: 15px; position: absolute; left:10px; top:25px; line-height: 31px; display: flex; justify-content: space-evenly; color:white;}
.music-head-iconBlack{ color:black; background:white; border:1px black solid;}
</style>
